<template>
  <div class="approval-detail">
    <back-to-top
      transitionName="fade"
      :customStyle="myBackToTopStyle"
      :visibilityHeight="300"
      :backPosition="0"
    ></back-to-top>
    <history-apply-record :prop-a="classObject" @change-module="onChangeModule" @click-complete="onClickComplete"></history-apply-record>
    <risk-model-proposal :prop-b="classObject" @change-module="onChangeModule" @click-complete="onClickComplete"></risk-model-proposal>
    <id-info v-on:userInfo="userInfoFn" :prop-c="classObject" @change-module="onChangeModule" @click-complete="onClickComplete"></id-info>
    <social-info></social-info>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div
        @click="clickChange('1')"
        style="padding: 5px; box-sizing: border;"
        v-bind:class="[classObject.isActive1? 'bg1': '']"
        class="work-info"
      >
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.work')}}</div>
          <div class="info">
            <el-button
              type="primary"
              size="small"
              @click.stop="workCore"
              style="background: #6083f7; border-color: #6083f7;"
            >{{$t('approvalDetail.seeElectricCore')}}</el-button>
            <el-button
              type="warning"
              size="small"
              @click.stop="dataReturnFn('company_code')"
              style="background: #e3e352; border-color: #e3e352;"
            >{{$t('approval.dataReturn')}}</el-button>
          </div>
        </div>
        <div class="detail-info">
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyName')}}:</span>
            <span>{{idInfo.companyName}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.IndustryType')}}:</span>
            <span>{{idInfo.jobName}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyProvince')}}:</span>
            <span>{{idInfo.companyProvince}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.position')}}:</span>
            <span>{{idInfo.commonProfessional}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('customQuery.year')}}:</span>
            <span>{{idInfo.workYears}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyCity')}}:</span>
            <span>{{idInfo.companyCounty}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.salary')}}:</span>
            <span>{{idInfo.salary}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyTel')}}:</span>
            <span>{{idInfo.companyTel}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyTown')}}:</span>
            <span>{{idInfo.companyTown}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyNet')}}:</span>
            <span>{{idInfo.companyNet}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.companyZipCode')}}:</span>
            <span>{{idInfo.companyZipCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 80px;">{{$t('approvalDetail.companyArea')}}:</span>
            <span>{{idInfo.companyRegion}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.DetailedAddress')}}:</span>
            <span>{{idInfo.companyAddress}}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div
        @click="clickChange('2')"
        style="padding: 5px; box-sizing: border;"
        v-bind:class="[classObject.isActive2? 'bg1': '']"
        class="emergency-contact"
      >
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.urgent')}}</div>
          <div class="info">
            <el-button
              type="primary"
              size="small"
              @click.stop="emContact"
              style="background: #6082f7; border-color: #6082f7;"
            >{{$t('approvalDetail.seeElectricCore')}}</el-button>
            <el-button
              type="warning"
              size="small"
              @click.stop="dataReturnFn('contacts_code')"
              style="background: #e3e452; border-color: #e3e452;"
            >{{$t('approval.dataReturn')}}</el-button>
          </div>
        </div>
        <div style="padding-left: 12px;">
        <el-table
          :data="urgentContact"
          style="width: 100%;font-size: 12px;margin-top: 5px;"
          border
          stripe
        >
          <el-table-column
            header-align="center"
            align="center"
            prop="contactsName"
            :label="$t('approvalDetail.contactsName')"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="mobile"
            :label="$t('approvalDetail.mobile')"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="relation"
            :label="$t('approvalDetail.relation')"
          ></el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="addressBookStatus"
            :label="$t('approvalDetail.addressBookStatus')"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.addressBookStatus=== 1">{{$t('approvalDetail.pass')}}</span>
              <span v-if="scope.row.addressBookStatus=== 2">{{$t('approvalDetail.nopass')}}</span>
            </template>
          </el-table-column>
          <el-table-column
            header-align="center"
            align="center"
            prop="checkStatus"
            :label="$t('approvalDetail.checkStatus')"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.checkStatus=== 2">{{$t('approvalDetail.nohit')}}</span>
              <span v-if="scope.row.checkStatus=== 1" class="hit">
                {{$t('approvalDetail.hit')}}
                <a
                  href="javascript:void(0)"
                  @click.stop="lookUp(scope.row)"
                >{{$t('approvalDetail.hitsee')}}></a>
              </span>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </div>
    </el-card>
    <el-card class="box-card" style="margin-bottom: 10px;">
      <div
        @click="clickChange('3')"
        style="padding: 5px; box-sizing: border;"
        v-bind:class="[classObject.isActive3? 'bg1': '']"
        class="personal-info"
      >
        <div class="head-title2">
          <div class="title">{{$t('approvalDetail.personal')}}</div>
          <div class="info">
            <el-button
              type="primary"
              size="small"
              @click.stop="PersonalInfo"
              style="background: #6083f7; border-color: #6083f7;"
            >{{$t('approvalDetail.seeElectricCore')}}</el-button>
            <el-button
              type="warning"
              size="small"
              @click.stop="dataReturnFn('personage_info_code')"
              style="background: #e3e452; border-color: #e3e452;"
            >{{$t('approval.dataReturn')}}</el-button>
          </div>
        </div>
        <div class="detail-info">
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.education')}}:</span>
            <span>{{idInfo.education}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.motherName')}}:</span>
            <span>{{idInfo.motherName}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveProvince')}}:</span>
            <span>{{idInfo.province}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.MailBox')}}:</span>
            <span>{{idInfo.email}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.MemberFamilyNum')}}:</span>
            <span>{{idInfo.familyNum}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveCity')}}:</span>
            <span>{{idInfo.country}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.LargeAreaCode')}}:</span>
            <span>{{idInfo.bigRegionCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.childrenNum')}}:</span>
            <span>{{idInfo.sonsNum}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveTown')}}:</span>
            <span>{{idInfo.town}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.CellNumber')}}:</span>
            <span>{{idInfo.smallRegionCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.HousingType')}}:</span>
            <span>{{idInfo.homeowner}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.liveArea')}}:</span>
            <span>{{idInfo.region}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.ZipCode')}}:</span>
            <span>{{idInfo.zipCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 150px;">{{$t('approvalDetail.HouseRent')}}:</span>
            <span>{{idInfo.rentalScopeCode}}</span>
          </div>
          <div class="detail-info-item">
            <span style="width: 70px;">{{$t('approvalDetail.DetailedAddress')}}:</span>
            <span>{{idInfo.familyAddress}}</span>
          </div>
          <div class="detail-info-item">
            <span>{{$t('approvalDetail.ResidenceTime')}}:</span>
            <span>{{idInfo.residenceTime}}</span>
          </div>
        </div>
      </div>
    </el-card>
    <el-dialog :title="$t('approvalDetail.workInfoCore')" :visible.sync="dialogWorkCore">
      <el-form
        :model="workInfoCoreForm"
        ref="workInfoCoreForm"
        label-width="100px"
        style="width: 90%;"
      >
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.jobTelStatus')">
              <el-select
                v-model="workInfoCoreForm.jobTelStatus"
                :placeholder="$t('rule.choose')"
                style="width: 100%;"
                size="small"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.jobMobile')">
              <el-input
                v-model="workInfoCoreForm.jobMobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="workInfoCoreForm.jobCheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="workInfoCoreSave"
        >{{$t('btn.complete')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('approvalDetail.rlt')" :visible.sync="dialogTableVisible">
      <div class="custom-form">
        <div class="thead">
          <div>{{$t('approvalDetail.rltname')}}</div>
          <div>{{$t('approvalDetail.mobile')}}</div>
          <div>{{$t('approvalDetail.relation')}}</div>
          <div>{{$t('approvalDetail.loanstatus')}}</div>
        </div>
        <div class="tbody">
          <div>{{gridData.contactsName}}</div>
          <div>{{gridData.mobile}}</div>
          <div>{{gridData.relation}}</div>
          <div>{{gridData.status}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogTableVisible = false">{{$t('btn.close')}}</el-button>
      </span>
    </el-dialog>
    <el-dialog :title="$t('approvalDetail.emContactCore')" :visible.sync="dialogEmContact">
      <el-form :model="emContactForm" ref="emContactForm" label-width="100px" style="width: 90%;">
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.contact1TelStatus')">
              <el-select
                v-model="emContactForm.contact1TelStatus"
                :placeholder="$t('rule.choose')"
                style="width: 100%;"
                size="small"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.telephone')">
              <el-input
                v-model="emContactForm.contact1Mobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="emContactForm.contact1CheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.contact2TelStatus')">
              <el-select
                v-model="emContactForm.contact2TelStatus"
                :placeholder="$t('rule.choose')"
                style="width: 100%;"
                size="small"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.telephone')">
              <el-input
                v-model="emContactForm.contact2Mobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="emContactForm.contact2CheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.contact3')">
              <el-select
                v-model="emContactForm.contact3TelStatus"
                :placeholder="$t('rule.choose')"
                style="width: 100%;"
                size="small"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.telephone')">
              <el-input
                v-model="emContactForm.contact3Mobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="emContactForm.contact3CheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.contact4')">
              <el-select
                v-model="emContactForm.contact4TelStatus"
                :placeholder="$t('rule.choose')"
                style="width: 100%;"
                size="small"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.telephone')">
              <el-input
                v-model="emContactForm.contact4Mobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="emContactForm.contact4CheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.contact5')">
              <el-select
                v-model="emContactForm.contact5TelStatus"
                :placeholder="$t('rule.choose')"
                style="width: 100%;"
                size="small"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.contact1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.contact2')" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.telephone')">
              <el-input
                v-model="emContactForm.contact5Mobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="emContactForm.contact5CheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="emContactCoreSave">{{$t('btn.complete')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('approvalDetail.perInfoCore')" :visible.sync="dialogOneselfCore">
      <el-form
        :model="oneInfoCoreForm"
        ref="oneInfoCoreForm"
        label-width="100px"
        style="width: 90%;"
      >
        <div style="display: flex;">
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.oneself')">
              <el-select
                v-model="oneInfoCoreForm.myselfTelStatus"
                :placeholder="$t('rule.choose')"
                size="small"
                style="width: 100%;"
                :disabled="true"
              >
                <el-option :label="$t('approvalDetail.oneself1')" value="1"></el-option>
                <el-option :label="$t('approvalDetail.oneself2')" value="2"></el-option>
                <el-option :label="$t('approvalDetail.oneself3')" value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('approvalDetail.oneselfMobile')">
              <el-input
                v-model="oneInfoCoreForm.myselfMobile"
                style="width: 100%;"
                size="small"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
        </div>
        <el-form-item :label="$t('grouping.remark')">
          <el-input
            type="textarea"
            size="small"
            v-model="oneInfoCoreForm.myselfCheckRemarks"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="oneInfoCoreSave">{{$t('btn.complete')}}</el-button>
      </div>
    </el-dialog>
    <locate-info></locate-info>
    <order-other-info v-on:applyAmtEvent="getApplyAmt"></order-other-info>
    <approval-opinion v-on:firstApprObj="apprAmtFn"></approval-opinion>
    <el-card class="box-card" style="margin-bottom: 8px;">
      <div class="title">{{$t('approvalDetail.view')}}</div>
      <el-form
        class="personal-opinion"
        :model="ruleForm"
        label-width="140px"
        :rules="rules"
        ref="ruleForm"
        size="mini"
        label-position="left"
      >
        <el-form-item :label="$t('approvalDetail.finaljud')" prop="status1">
          <el-radio-group
            v-model="ruleForm.status1"
            style="margin: 10px 0;"
            @change="changeHandlerEnd"
          >
            <el-radio :label="$t('approvalDetail.adopt')" size="mini"></el-radio>
            <el-radio :label="$t('approvalDetail.refuse')" size="mini"></el-radio>
            <el-radio :label="$t('approvalDetail.derate')" size="mini"></el-radio>
            <el-radio :label="$t('approvalDetail.refuseAndBlack')" size="mini"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="$t('approvalDetail.refuseReason')" prop="rejectReason" v-if="isRefuse">
          <el-select 
          style="width: 100%;"
          size='small' 
          v-model='ruleForm.rejectReason'
          :placeholder="$t('approvalDetail.ruleRefuseReason')">
              <el-option
              v-for='item in rejectArr'
              :key='item'
              :label='item'
              :value='item'>
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('approvalDetail.limit')" prop="approvedAmtEnd" v-if="isQuota1">
          <el-input
            type="number"
            v-model="ruleForm.approvedAmtEnd"
            size="mini"
            style="width: 200px;"
            @input="blurFnEnd"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('approvalDetail.blackoutDesc')" prop="explain" v-if="isExplain">
          <el-input
            type="textarea"
            size="small"
            v-model="ruleForm.explain"
            :placeholder="$t('approvalDetail.ruleBlacklist')"
            :maxlength="500"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('approvalDetail.finalremarks')">
          <el-input
            type="textarea"
            size="small"
            v-model="ruleForm.checkOpinion1"
            :placeholder="$t('rule.toLength')"
            :maxlength="500"
          ></el-input>
        </el-form-item>
        <div style="text-align: center;">
          <el-button type="primary" @click="submit('ruleForm')">{{$t('btn.submit')}}</el-button>
          <el-button @click="back('ruleForm')">{{$t('btn.back')}}</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import {
  getContact,
  getHit,
  getCustomerInfo,
  orderBack,
  telephoneCheck,
  finalApprovel,
  addBlackList,
  getRejectReason
} from "api/trust/firstApprDetails/index";
export default {
  components: {
    "back-to-top": () => import("components/BackToTop"),
    "history-apply-record": () => import("./components/HistoryApplyRecord"),
    "risk-model-proposal": () => import("./components/RiskModelProposal"),
    "id-info": () => import("./components/IdInfo"),
    "social-info": () => import("./components/SocialInfo"),
    "locate-info": () => import("./components/LocateInfo"),
    "order-other-info": () => import("./components/OrderOtherInfo"),
    "approval-opinion": () => import("./components/ApprovalOpinion")
  },
  data() {
    return {
      classObject: {
        isActive1: false,
        isActive2: false,
        isActive3: false,
        isActive4: false,
        isActive5: false,
        isActive6: false,
        isActive7: false,
        isActive8: false,
      },
      myBackToTopStyle: {
        right: "50px",
        bottom: "50px",
        width: "40px",
        height: "40px",
        "border-radius": "4px",
        "line-height": "45px", // 请保持与高度一致以垂直居中
        background: "#e7eaf1" // 按钮的背景颜色
      },
      listObj: {},
      lanStatus: null,
      idInfo: {},
      dialogWorkCore: false,
      workInfoCoreForm: {
        jobTelStatus: "",
        jobMobile: "",
        jobCheckRemarks: ""
      },
      urgentContact: [],
      dialogTableVisible: false,
      gridData: {
        contactsName: "",
        mobile: "",
        relation: "",
        status: ""
      },
      dialogEmContact: false,
      emContactForm: {
        contact1TelStatus: "",
        contact1Mobile: "",
        contact1CheckRemarks: "",
        contact2TelStatus: "",
        contact2Mobile: "",
        contact2CheckRemarks: "",
        contact3TelStatus: "",
        contact3Mobile: "",
        contact3CheckRemarks: "",
        contact4TelStatus: "",
        contact4Mobile: "",
        contact4CheckRemarks: "",
        contact5TelStatus: "",
        contact5Mobile: "",
        contact5CheckRemarks: ""
      },
      dialogOneselfCore: false,
      oneInfoCoreForm: {
        myselfTelStatus: "",
        myselfMobile: "",
        myselfCheckRemarks: ""
      },
      ruleForm: {
        status1: "",
        rejectReason: "",
        approvedAmtEnd: "",
        explain: "",
        checkOpinion1: ""
      },
      rules: {
        status1: [
          {
            required: true,
            message: this.$t("approvalDetail.ruleEndResult"),
            trigger: "change"
          }
        ],
        rejectReason: [
          {
            required: true,
            message: this.$t("approvalDetail.refuseReason"),
            trigger: "change"
          }
        ],
        explain: [
          {
            required: true,
            message: this.$t("approvalDetail.ruleBlacklist"),
            trigger: "blur"
          }
        ],
        approvedAmtEnd: [
          {
            required: true,
            message: this.$t("approvalDetail.ruleLimit")
          }
        ]
      },
      isQuota1: false,
      isRefuse: false,
      isExplain: false,
      returnData: {
        businessUserId: "",
        userId: "",
        appPackageName: "",
        channel: "",
        orderId: "",
        authPageCode: ""
      },
      applyAmt: "",
      userInfo: {},
      approvedAmt: "",
      firststatus: '',
      rejectArr: []
    };
  },
  computed: {
    ...mapGetters(["elements", "language", "endApprDetails"])
  },
  created() {
    if (this.language === "zh") {
      this.lanStatus = 1;
    } else if (this.language === "en") {
      this.lanStatus = 2;
    } else {
      this.lanStatus = 3;
    }
    this.getParamsDetail();
    this.workFn();
    this.emContactsFn();
    this.getRejectFn();
  },
  methods: {
    getParamsDetail() {
      this.listObj = this.endApprDetails;
    },
    // 获取拒绝原因
    getRejectFn() {
      let obj = {};
      obj.msgType = this.lanStatus;
      obj.codeType = 'reject_reason';
      getRejectReason(obj)
      .then(res => {
        if (res.status === 200) {
          this.rejectArr = res.data;
        }
      })
    },
    //终审结果改变时
    changeHandlerEnd(val) {
      if (val === this.$t("approvalDetail.derate")) {
        this.isQuota1 = true;
      } else {
        this.isQuota1 = false;
      }
      if (val === this.$t("approvalDetail.refuseAndBlack")) {
        this.isExplain = true;
      } else {
        this.isExplain = false;
      }
      if (val === this.$t('approvalDetail.refuse')) {
        this.isRefuse = true;
      } else {
        this.isRefuse = false;
      }
    },
    //终审额度效验
    blurFnEnd() {
      if (this.firststatus === 3) {  
          let msg = this.approvedAmt.replace(/,/g,'')
          if(Number(this.ruleForm.approvedAmtEnd) > Number(msg)) {
              this.$message({
                  showClose: true,
                  message: this.$t('approvalDetail.cue7'),
                  type: 'warning'
              });
          }
      } else if(this.firststatus !== 3){
          let msg = this.applyAmt.replace(/,/g,'')
          if(Number(this.ruleForm.approvedAmtEnd) > Number(msg)) {
              this.$message({
                  showClose: true,
                  message: this.$t('approvalDetail.cue7'),
                  type: 'warning'
              });
          }
      }
    },
    // 获取审批额度
    getApplyAmt(data) {
      this.applyAmt = data;
    },
    // 获取用户信息
    userInfoFn(data) {
      this.userInfo = data;
    },
    // 初审审批额度
    apprAmtFn(data) {
      this.approvedAmt = data.approvedAmt;
      this.firststatus = data.checkUserStatus;
    },
    // 点击div改变模块颜色
    onChangeModule(module) {
      if (module === "4") {
        this.$set(this.classObject, "isActive4", true);
      } else if (module === "5") {
        this.$set(this.classObject, "isActive5", true);
      } else if (module === "6") {
        this.$set(this.classObject, "isActive6", true);
      } else if (module === "7") {
        this.$set(this.classObject, "isActive7", true);
      } else if (module === "8") {
        this.$set(this.classObject, "isActive8", true);
      }
    },
    // 点击完成改变模块颜色
    onClickComplete(module) {
      if (module === "4") {
        this.$set(this.classObject, "isActive4", true);
      } else if (module === "5") {
        this.$set(this.classObject, "isActive5", true);
      } else if (module === "6") {
        this.$set(this.classObject, "isActive6", true);
      } else if (module === "7") {
        this.$set(this.classObject, "isActive7", true);
      } else if (module === "8") {
        this.$set(this.classObject, "isActive8", true);
      }
    },
    // 点击改变颜色
    clickChange(module) {
      if (module === "1") {
        this.$set(this.classObject, "isActive1", true);
      } else if (module === "2") {
        this.$set(this.classObject, "isActive2", true);
      } else if (module === "3") {
        this.$set(this.classObject, "isActive3", true);
      }
    },
    // 点击资料退回按钮
    dataReturnFn(type) {
      this.$confirm(this.$t("approvalDetail.dataReturnWarn"), {
        confirmButtonText: this.$t("btn.confirm"),
        cancelButtonText: this.$t("btn.cancel"),
        type: "warning",
        center: true
      })
        .then(() => {
          this.returnData.appPackageName = this.listObj.appPackageName;
          this.returnData.channel = this.listObj.channel;
          this.returnData.orderId = this.listObj.orderId;
          this.returnData.userId = this.listObj.userId;
          this.returnData.businessUserId = this.listObj.checkUserId;
          this.returnData.authPageCode = type;
          this.returnData.msgType = this.lanStatus;
          this.returnData.type = 3;
          orderBack(this.returnData).then(res => {
            if (res.status === 200) {
              this.$message({
                showClose: true,
                type: "success",
                message: this.$t("approval.warnSus")
              });
              let view = {};
              view.name = this.$route.name;
              view.path = this.$route.path;
              this.$store.dispatch("delVisitedViews", view);
              this.$router.push("/trust/endApproval");
            }
          });
        })
        .catch(() => {
          this.$message({
            showClose: true,
            type: "info",
            message: this.$t("loanDetail.cue3")
          });
        });
    },
    // 工作信息
    workFn() {
      let workObj = {};
      workObj.userId = this.listObj.userId;
      workObj.orderId = this.listObj.orderId;
      workObj.msgType = this.lanStatus;
      workObj.userUUID = this.listObj.userUUID;
      getCustomerInfo(workObj).then(res => {
        if (JSON.stringify(res.data) === "{}") {
          this.idInfo = {};
        } else {
          this.idInfo = res.data.loanCustomerInfo;
        }
      });
    },
    // 工作信息电核
    workCore() {
      let obj = {};
      obj.orderId = this.listObj.orderId;
      telephoneCheck(obj).then(res => {
        if (res.status === 200) {
          this.dialogWorkCore = true;
          this.workInfoCoreForm.jobTelStatus = res.data.jobTelStatus;
          this.workInfoCoreForm.jobMobile = res.data.jobMobile;
          this.workInfoCoreForm.jobCheckRemarks = res.data.jobCheckRemarks;
        }
      });
    },
    // 工作信息电核保存
    workInfoCoreSave() {
      this.dialogWorkCore = false;
      this.$set(this.classObject, "isActive1", true);
    },
    // 紧急联系人电核
    emContact() {
      let obj = {};
      obj.orderId = this.listObj.orderId;
      telephoneCheck(obj).then(res => {
        if (res.status === 200) {
          this.dialogEmContact = true;
          this.emContactForm.contact1TelStatus = res.data.contact1TelStatus;
          this.emContactForm.contact1Mobile = res.data.contact1Mobile;
          this.emContactForm.contact1CheckRemarks =
            res.data.contact1CheckRemarks;
          this.emContactForm.contact2TelStatus = res.data.contact2TelStatus;
          this.emContactForm.contact2Mobile = res.data.contact2Mobile;
          this.emContactForm.contact2CheckRemarks =
            res.data.contact2CheckRemarks;
          this.emContactForm.contact3TelStatus = res.data.contact3TelStatus;
          this.emContactForm.contact3Mobile = res.data.contact3Mobile;
          this.emContactForm.contact3CheckRemarks =
            res.data.contact3CheckRemarks;
          this.emContactForm.contact4TelStatus = res.data.contact4TelStatus;
          this.emContactForm.contact4Mobile = res.data.contact4Mobile;
          this.emContactForm.contact4CheckRemarks =
            res.data.contact4CheckRemarks;
          this.emContactForm.contact5TelStatus = res.data.contact5TelStatus;
          this.emContactForm.contact5Mobile = res.data.contact5Mobile;
          this.emContactForm.contact5CheckRemarks =
            res.data.contact5CheckRemarks;
        }
      });
    },
    // 紧急联系人电核保存
    emContactCoreSave() {
      this.dialogEmContact = false;
      this.$set(this.classObject, "isActive2", true);
    },
    // 紧急联系人
    emContactsFn() {
      //紧急联系人
      let contact = {};
      contact.orderId = this.listObj.orderId;
      contact.msgType = this.lanStatus;
      getContact(contact).then(res => {
        this.urgentContact = res.data;
      });
    },
    //查看
    lookUp(row) {
      //命中
      let hit = {};
      hit.mobile = row.mobile;
      getHit(hit).then(res => {
        this.gridData.contactsName = row.contactsName;
        this.gridData.mobile = row.mobile;
        this.gridData.relation = row.relation;
        switch (res.data.status) {
          case "100":
            this.gridData.status = this.$t("approvalDetail.registered");
            break;
          case "1":
            this.gridData.status = this.$t("approvalDetail.audit");
            break;
          case "2":
            this.gridData.status = this.$t("approvalDetail.credit");
            break;
          case "3":
            this.gridData.status = this.$t("approvalDetail.repayments");
            break;
          case "4":
            this.gridData.status = this.$t("approvalDetail.refused");
            break;
          case "5":
            this.gridData.status = this.$t("approvalDetail.clear");
            break;
        }
        this.dialogTableVisible = true;
      });
    },
    // 个人信息电核
    PersonalInfo() {
      let obj = {};
      obj.orderId = this.listObj.orderId;
      telephoneCheck(obj).then(res => {
        if (res.status === 200) {
          this.dialogOneselfCore = true;
          this.oneInfoCoreForm.myselfTelStatus = res.data.myselfTelStatus;
          this.oneInfoCoreForm.myselfMobile = res.data.myselfMobile;
          this.oneInfoCoreForm.myselfCheckRemarks = res.data.myselfCheckRemarks;
        }
      });
    },
    // 个人信息电核保存
    oneInfoCoreSave() {
      this.dialogOneselfCore = false;
      this.$set(this.classObject, "isActive3", true);
    },
    //提交
    submit(formName) {
      if (this.classObject.isActive4 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".history-record").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmHistory"),
          type: "warning"
        });
      } else if (this.classObject.isActive5 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".risk-model").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmRiskModel"),
          type: "warning"
        });
      } else if (this.classObject.isActive6 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".id-info-box").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmIDInfo"),
          type: "warning"
        });
      } else if (this.classObject.isActive7 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".supple-info").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmSuppleInfo"),
          type: "warning"
        });
      } else if (this.classObject.isActive8 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".bank-info").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmBankInfo"),
          type: "warning"
        });
      } else if (this.classObject.isActive1 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".work-info").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmWorkInfo"),
          type: "warning"
        });
      } else if (this.classObject.isActive2 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".emergency-contact").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmEmContact"),
          type: "warning"
        });
      } else if (this.classObject.isActive3 === false) {
        $("html,body").animate(
          {
            scrollTop: $(".personal-info").offset().top - parseInt("120px")
          },
          800
        );
        this.$message({
          showClose: true,
          message: this.$t("approvalDetail.confirmPersonalInfo"),
          type: "warning"
        });
      } else {
        this.$refs[formName].validate(valid => {
          if (valid) {
            let format = this.applyAmt.replace(/,/g, "");
            let startAmt = this.approvedAmt.replace(/,/g, "");
            if (this.ruleForm.status1 === this.$t("approvalDetail.derate")) {
              if(this.firststatus === 3) {
                if (Number(this.ruleForm.approvedAmtEnd) > Number(startAmt)) {
                  this.$message({
                    showClose: true,
                    message: this.$t("approvalDetail.cue7"),
                    type: "warning"
                  });
                } else if (
                  Number(this.ruleForm.approvedAmtEnd) < 10000 &&
                  this.ruleForm.approvedAmtEnd !== ""
                ) {
                  this.$message({
                    showClose: true,
                    message: this.$t("approvalDetail.cue9"),
                    type: "warning"
                  });
                } else {
                  this.$confirm(this.$t("approvalDetail.cue1"), {
                    confirmButtonText: this.$t("btn.confirm"),
                    cancelButtonText: this.$t("btn.cancel"),
                    type: "warning",
                    center: true
                  })
                    .then(() => {
                      // let view = {};
                      // view.name = this.$route.name;
                      // view.path = this.$route.path;
                      // this.$store
                      //   .dispatch("delVisitedViews", view)
                      //   .then(views => {
                      //     const latestView = views.slice(-1)[0];
                      //     if (latestView) {
                      //       this.$router.push(latestView.path);
                      //     } else {
                      //       this.$router.push("/");
                      //     }
                      //   });
                      let msg1 = {};
                      msg1.orderId = this.listObj.orderId;
                      if (
                        this.ruleForm.status1 === this.$t("approvalDetail.adopt")
                      ) {
                        msg1.status = 2;
                      } else if (
                        this.ruleForm.status1 === this.$t("approvalDetail.refuse")
                      ) {
                        msg1.status = 4;
                      } else if (
                        this.ruleForm.status1 === this.$t("approvalDetail.derate")
                      ) {
                        msg1.status = 3;
                        msg1.approvedAmt = Number(this.ruleForm.approvedAmtEnd);
                      }
                      msg1.finalCheckOpinion = this.ruleForm.checkOpinion1;
                      msg1.msgType = this.lanStatus;
                      finalApprovel(msg1).then(res => {
                        if (res.status == 200) {
                          this.$message({
                            showClose: true,
                            type: "success",
                            message: this.$t("approvalDetail.cue2")
                          });
                          this.$router.push("/trust/endApproval");
                        } else {
                          this.$message({
                            showClose: true,
                            message: res.message,
                            type: "warning"
                          });
                        }
                      });
                    })
                    .catch(() => {
                      this.$message({
                        showClose: true,
                        type: "info",
                        message: this.$t("approvalDetail.cue3")
                      });
                    });
                }
              } else {
                if (Number(this.ruleForm.approvedAmtEnd) > Number(format)) {
                  this.$message({
                    showClose: true,
                    message: this.$t("approvalDetail.cue7"),
                    type: "warning"
                  });
                } else if (
                  Number(this.ruleForm.approvedAmtEnd) < 10000 &&
                  this.ruleForm.approvedAmtEnd !== ""
                ) {
                  this.$message({
                    showClose: true,
                    message: this.$t("approvalDetail.cue9"),
                    type: "warning"
                  });
                } else {
                  this.$confirm(this.$t("approvalDetail.cue1"), {
                    confirmButtonText: this.$t("btn.confirm"),
                    cancelButtonText: this.$t("btn.cancel"),
                    type: "warning",
                    center: true
                  })
                    .then(() => {
                      // let view = {};
                      // view.name = this.$route.name;
                      // view.path = this.$route.path;
                      // this.$store
                      //   .dispatch("delVisitedViews", view)
                      //   .then(views => {
                      //     const latestView = views.slice(-1)[0];
                      //     if (latestView) {
                      //       this.$router.push(latestView.path);
                      //     } else {
                      //       this.$router.push("/");
                      //     }
                      //   });
                      let msg1 = {};
                      msg1.orderId = this.listObj.orderId;
                      if (
                        this.ruleForm.status1 === this.$t("approvalDetail.adopt")
                      ) {
                        msg1.status = 2;
                      } else if (
                        this.ruleForm.status1 === this.$t("approvalDetail.refuse")
                      ) {
                        msg1.status = 4;
                      } else if (
                        this.ruleForm.status1 === this.$t("approvalDetail.derate")
                      ) {
                        msg1.status = 3;
                        msg1.approvedAmt = Number(this.ruleForm.approvedAmtEnd);
                      }
                      msg1.finalCheckOpinion = this.ruleForm.checkOpinion1;
                      msg1.msgType = this.lanStatus;
                      finalApprovel(msg1).then(res => {
                        if (res.status == 200) {
                          this.$message({
                            showClose: true,
                            type: "success",
                            message: this.$t("approvalDetail.cue2")
                          });
                          this.$router.push("/trust/endApproval");
                        } else {
                          this.$message({
                            showClose: true,
                            message: res.message,
                            type: "warning"
                          });
                        }
                      });
                      this.$message({
                        showClose: true,
                        type: "success",
                        message: this.$t("approvalDetail.cue2")
                      });
                    })
                    .catch(() => {
                      this.$message({
                        showClose: true,
                        type: "info",
                        message: this.$t("approvalDetail.cue3")
                      });
                    });
                }
              }
            } else if (
              this.ruleForm.status1 === this.$t("approvalDetail.refuseAndBlack")
            ) {
              this.$confirm(this.$t("approvalDetail.cue1"), {
                confirmButtonText: this.$t("btn.confirm"),
                cancelButtonText: this.$t("btn.cancel"),
                type: "warning",
                center: true
              })
                .then(() => {
                  // let view = {};
                  // view.name = this.$route.name;
                  // view.path = this.$route.path;
                  // this.$store.dispatch("delVisitedViews", view).then(views => {
                  //   const latestView = views.slice(-1)[0];
                  //   if (latestView) {
                  //     this.$router.push(latestView.path);
                  //   } else {
                  //     this.$router.push("/");
                  //   }
                  // });
                  // 添加到黑名单
                  let black = {};
                  black.orderId = this.listObj.orderId;
                  black.mobile = this.userInfo.phoneNo;
                  black.name = this.userInfo.realName;
                  black.idNumber = this.userInfo.cardNum;
                  black.bankNo = this.userInfo.bankCard;
                  black.channel = this.listObj.channel;
                  black.reason = this.ruleForm.explain;
                  addBlackList(black).then(res => {});
                  let msg1 = {};
                  msg1.orderId = this.listObj.orderId;
                  if (
                    this.ruleForm.status1 === this.$t("approvalDetail.adopt")
                  ) {
                    msg1.status = 2;
                  } else if (
                    this.ruleForm.status1 ===
                      this.$t("approvalDetail.refuse") ||
                    this.ruleForm.status1 ===
                      this.$t("approvalDetail.refuseAndBlack")
                  ) {
                    msg1.status = 4;
                  } else if (
                    this.ruleForm.status1 === this.$t("approvalDetail.derate")
                  ) {
                    msg1.status = 3;
                    msg1.approvedAmt = Number(this.ruleForm.approvedAmtEnd);
                  }
                  msg1.finalCheckOpinion = this.ruleForm.checkOpinion1;
                  msg1.reason = this.ruleForm.explain;
                  msg1.msgType = this.lanStatus;
                  msg1.blackFlag = "blackFlag";
                  finalApprovel(msg1).then(res => {
                    if (res.status == 200) {
                      this.$message({
                        showClose: true,
                        type: "success",
                        message: this.$t("approvalDetail.cue2")
                      });
                      this.$router.push("/trust/endApproval");
                    } else {
                      this.$message({
                        showClose: true,
                        message: res.message,
                        type: "warning"
                      });
                    }
                  });
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: this.$t("approvalDetail.cue2")
                  });
                })
                .catch(() => {
                  this.$message({
                    showClose: true,
                    type: "info",
                    message: this.$t("approvalDetail.cue3")
                  });
                });
            } else {
              this.$confirm(this.$t("approvalDetail.cue1"), {
                confirmButtonText: this.$t("btn.confirm"),
                cancelButtonText: this.$t("btn.cancel"),
                type: "warning",
                center: true
              })
                .then(() => {
                  // let view = {};
                  // view.name = this.$route.name;
                  // view.path = this.$route.path;
                  // this.$store.dispatch("delVisitedViews", view).then(views => {
                  //   const latestView = views.slice(-1)[0];
                  //   if (latestView) {
                  //     this.$router.push(latestView.path);
                  //   } else {
                  //     this.$router.push("/");
                  //   }
                  // });

                  let msg1 = {};
                  msg1.orderId = this.listObj.orderId;
                  if (
                    this.ruleForm.status1 === this.$t("approvalDetail.adopt")
                  ) {
                    msg1.status = 2;
                  } else if (
                    this.ruleForm.status1 === this.$t("approvalDetail.refuse")
                  ) {
                    msg1.status = 4;
                    msg1.rejectReason = this.ruleForm.rejectReason;
                  } else if (
                    this.ruleForm.status1 === this.$t("approvalDetail.derate")
                  ) {
                    msg1.status = 3;
                    msg1.approvedAmt = Number(this.ruleForm.approvedAmtEnd);
                  }
                  msg1.finalCheckOpinion = this.ruleForm.checkOpinion1;
                  msg1.msgType = this.lanStatus;
                  finalApprovel(msg1).then(res => {
                    if (res.status == 200) {
                      this.$message({
                        showClose: true,
                        type: "success",
                        message: this.$t("approvalDetail.cue2")
                      });
                      this.$router.push("/trust/endApproval");
                    } else {
                      this.$message({
                        showClose: true,
                        message: res.message,
                        type: "warning"
                      });
                    }
                  });
                  this.$message({
                    showClose: true,
                    type: "success",
                    message: this.$t("approvalDetail.cue2")
                  });
                })
                .catch(() => {
                  this.$message({
                    showClose: true,
                    type: "info",
                    message: this.$t("approvalDetail.cue3")
                  });
                });
            }
          } else {
            return false;
          }
        });
      }
    },
    //返回
    back(formName) {
      let view = {};
      view.name = this.$route.name;
      view.path = this.$route.path;
      this.$store.dispatch("delVisitedViews", view);
      this.$router.push("/trust/endApproval");
      this.$refs[formName].resetFields();
    }
  }
};
</script>

<style scoped lang="scss">
input::-webkit-input-placeholder {
  font-size: 12px;
}
.approval-detail {
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  position: relative;
}
.title {
  line-height: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: bold;
}
.title:before {
  display: block;
  content: "";
  width: 3px;
  height: 16px;
  background-color: #309afe;
}
.title:before {
  margin-right: 8px;
}
::before {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.el-table {
  z-index: 0;
}
.id-photo {
  padding: 20px;
  box-sizing: border-box;
  #image,
  #image2 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  #image > div,
  #image2 > div {
    width: 30%;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 3%;
    img {
      width: 100%;
    }
  }
}
.risk {
  font-size: 12px;
  .risk-item {
    padding: 20px 0 20px 28px;
    box-sizing: border-box;
    button {
      padding: 0 20px;
      height: 28px;
      outline: none;
      border-width: 0;
      border-radius: 4px;
      font-size: 12px;
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
      margin-left: 50px;
    }
  }
}
.basic {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #ebeef5;
  margin-bottom: 40px;
  .basic-title {
    height: 40px;
    line-height: 40px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #ebeef5;
    padding-left: 28px;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: bold;
  }
  .optional {
    display: flex;
    font-size: 12px;
    .optional-item {
      flex: 1;
      padding: 10px 0 10px 10%;
      box-sizing: border-box;
      border-right: 1px solid #ebeef5;
      &:last-child {
        border: none;
      }
      & > div {
        line-height: 25px;
        span:nth-child(1) {
          margin-right: 5px;
          color: #616264;
        }
        span:nth-child(2) {
          color: #8a8a8c;
        }
      }
    }
  }
}
.personal-opinion {
  width: 100%;
  padding: 10px 0 10px 12px;
  box-sizing: border-box;
  .personal-opinion-item {
    width: 100%;
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      display: inline-block;
      width: 90px;
      text-align: right;
      font-size: 12px;
      font-weight: bold;
      margin-right: 15px;
      color: #616264;
    }
  }
}
.hit {
  color: red;
  & > a {
    position: absolute;
    right: 10px;
    color: #20a0ff;
    text-decoration: underline;
  }
}
.custom-form {
  width: 100%;
  text-align: center;
  .thead {
    line-height: 45px;
    display: flex;
    font-weight: bold;
    & > div {
      flex: 1;
      border-left: 1px solid #eee;
      border-top: 1px solid #eee;
      &:last-child {
        border-right: 1px solid #eee;
      }
    }
  }
  .tbody {
    line-height: 45px;
    display: flex;
    & > div {
      flex: 1;
      border-left: 1px solid #eee;
      border-top: 1px solid #eee;
      border-bottom: 1px solid #eee;
      &:last-child {
        border-right: 1px solid #eee;
      }
    }
  }
}
.pagination-container {
  width: 92%;
  margin-left: 4%;
  margin-bottom: 20px;
}
.href {
  border-bottom: 1px solid #000;
  cursor: pointer;
  color: #20a0ff;
  border-bottom: 1px solid #20a0ff;
}
.back {
  margin-top: 40px;
  margin-bottom: 80px;
  button {
    padding: 0 20px;
    height: 28px;
    background: #20a0ff;
    color: #fff;
    outline: none;
    border-width: 0;
    border-radius: 4px;
    font-size: 12px;
    &:nth-child(2) {
      margin-left: 10px;
      background: #ebf5ff;
      color: #20a0ff;
      border: 1px solid #abd5ff;
    }
  }
}
.el-table .warning-row {
  background: rgb(58, 230, 52);
}
.head-title2 {
  display: flex;
  justify-content: space-between;
}
.detail-info {
  flex: 7;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-top: 5px;
  margin-left: 12px;
  .detail-info-item {
    width: 33%;
    line-height: 25px;
    display: flex;
    padding-right: 20px;
    box-sizing: border-box;
    span:nth-child(1) {
      display: inline-block;
      width: 110px;
      text-align: left;
      margin-right: 5px;
      color: #616264;
    }
    span:nth-child(2) {
      color: #8a8a8c;
      display: inline-block;
      line-height: 25px;
    }
  }
}
.bg1 {
  background:#98e48b;
}
</style>